<template>
	<!-- 底部操作栏 -->
	<view class="operation">
		<view class="home" @tap="menuClick(0)">
			<u-icon name="home" size="16"></u-icon>
			<text>首页</text>
			
		</view>
		<view class="cart" @tap="menuClick(1)">
			<!-- <image class="imgV" src="./cart.png"></image> -->
			<u-icon name="star" size="16"></u-icon>
			<text>收藏</text>
		</view>
		<view class="btns" v-if="false">
		
			<view class="dingjin" :style="'background:' + colors" @tap="menuClick(3)">
				申请职位
			</view>
		</view>
		<view class="btns" v-show="true">
			<view class="dingjin1" :style="'background:' + colors" @tap="menuClick(4)">
				投递
			</view>
			<view class="dingjin2" :style="'background:' + colors" @tap="menuClick(5)">
				编辑
			</view>
		</view>
	</view>

</template>

<script>
	export default {
		data() {
			return {};
		},


		props: {

			// 菜单图标
			colors: {
				type: String,
				default: '#31a889',
			}

		},
		methods: {
			menuClick(tag) {

				this.$emit("menuClick", tag);
			},



		}
	};
</script>


<style>
	.operation {
		height: 100upx;
		width: 100vw;
		/* line-height: 100upx; */
		display: flex;
		justify-content: flex-start;
		align-content: center;
		align-items: center;
		background-color: #F0F0F0;
		position: fixed;
		bottom: 0;
		left: 0;
		padding: 6px 20upx;
		z-index: 90;
	}
	
	/* 设置首页菜单 购物车菜单样式 */
	.operation .home,
	.cart {
		width: 100upx;
		height: 80upx;
		display: flex;
		align-items: center;
		flex-direction: column;
		justify-content: center;
	}



	.imgV {

		width: 24px;
		height: 24px;
	}

	.operation .btns {
		display: flex;
		width: 68vw;
		justify-content: flex-end;
		margin-right: 10px !important;
		margin-top: -2px;
	}

	.operation .btns .addcart {
		height: 68rpx !important;
		line-height: 70upx;
		text-align: center;
		border: 2upx solid #A160F0;
		padding: 0 40upx;
		border-radius: 40upx;
		font-size: 24upx;
		color: #A160F0;
		font-weight: bold;
		
	}

	.operation .btns .dingjin {
		width: 100%;
		height: 68rpx !important;
		line-height: 70upx;
		text-align: center;
		padding: 0 40upx;
		border-radius:40upx;
		border-left: none;
		font-size: 24upx;
		color: #fff;
		background-color: #A160F0;
		font-weight: bold;
	}
	.operation .btns .dingjin1 {
		width: 100%;
		height: 68rpx !important;
		line-height: 70upx;
		text-align: center;
		padding: 0 40upx;
		border-top-left-radius:40upx;
		border-bottom-left-radius:40upx;
		border-left: none;
		font-size: 24upx;
		color: #fff;
		background-color: #A160F0;
		font-weight: bold;
	}
	.operation .btns .dingjin2 {
		width: 100%;
		height: 68rpx !important;
		line-height: 70upx;
		text-align: center;
		padding: 0 40upx;
		border-top-right-radius:40upx;
		border-bottom-right-radius:40upx;
		border-left: none;
		font-size: 24upx;
		color: #fff;
		background-color: #A160F0;
		font-weight: bold;
	}
</style>